<template>
	<navBar title="个性签名"></navBar>
	<view class="motto-container">
		<up-input v-model="motto" placeholder="请输入你的个性签名（不超过30字）" prefixIcon="edit-pen"
			prefixIconStyle="font-size: 20px;color: #909399" border="bottom" clearable maxlength="30" showWordLimit
			inputAlign="left" fontSize="16px" color="#303133" customStyle="background: #fff"></up-input>

		<button class="submit-btn" @click="submitMotto">保存个性签名</button>
	</view>
	<tabBar></tabBar>
</template>

<script>
	import {
		userInfo
	} from '@/stores/userInfo';
	export default {
		data() {
			return {
				motto: ''
			};
		},

		onLoad() {
			this.motto = userInfo().motto
		},
		
		methods: {
			async submitMotto() {
				if (this.motto === '') {
					uni.showToast({
						title: '不能为空',
						icon: 'none'
					})
					return
				}
				console.log(this.motto)

				await userInfo().changeMotto(this.motto)
				uni.showToast({
					title: '修改成功'
				})
			}
		}
	}
</script>

<style lang="scss">
	/* 主容器样式：上下留白 + 左右边距 */
	.motto-container {
		padding: 20px 16px;
		background-color: #fafafa;
		min-height: calc(100vh - 120px);
		/* 适配页面高度，避免内容过短 */
		box-sizing: border-box;
	}

	/* 提交按钮样式：简约圆角 + 柔和颜色 */
	.submit-btn {
		margin-top: 30px;
		width: 100%;
		height: 46px;
		line-height: 46px;
		background-color: #409eff;
		color: #fff;
		border-radius: 8px;
		font-size: 16px;
	}

	/* 去除按钮默认边框（部分机型兼容） */
	.submit-btn::after {
		border: none;
	}
</style>